<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">home</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">菜单管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 添加按钮 -->
    <el-button @click="addInfo" class="btnInfo" type="primary" size="small">添加</el-button>
    <!-- 列表 -->
    <v-list @edit="edit"></v-list>
    <!-- 弹框 -->
    <v-dialog ref="dialog_ref" :dialog_info="dialog_info" @cancel="cancel"></v-dialog>
  </div>
</template>

<script lang="ts" setup>
//引入封装好的列表
import vList from './list.vue'
//弹框
import vDialog from './dialog.vue'
import { reactive, ref } from 'vue'
let dialog_ref = ref()
//定义属性去控制弹框的显示隐藏
let dialog_info = reactive({
  isShow: false,
  isAdd: true
})
//let isShow = ref(false)
//封装添加打开弹框事件
let addInfo = () => {
  //打开弹框
  dialog_info.isShow = true
  //告诉弹框你是添加
  dialog_info.isAdd = true
}
//封装一个关闭弹框事件
let cancel = (e: any): void => {
  //关闭弹框
  dialog_info.isShow = e
}
//封装编辑打开弹框事件
let edit = (e: number) => {
  //打开弹框
  dialog_info.isShow = true
  //告诉弹框你是编辑
  dialog_info.isAdd = false
  //触发弹框的查询一条数据
  dialog_ref.value.lookup(e)
}
</script>

<style scoped>
.btnInfo {
  margin: 10px;
}
</style>
